<script setup lang='ts'>
import { onMounted, ref } from 'vue'
import { userData, UpUserData, BanUserData,ReleaseUserData,istoken } from "../../../api/api";
import { ElMessage, ElMessageBox } from 'element-plus'
const centerDialogVisible = ref(false)
const num = ref(1)
const data = ref()
const id = ref()
//初始化
onMounted(async () => {
    user()
    is()
})
//判断登录
const is = async () => {
    const res = await istoken()
    if (res.data.code !== '200') {
        // 从localStorage中删除名为'token'的项
        localStorage.removeItem('token');
        localStorage.removeItem('mail');
    }
}
const handleDelete = (row: string) => {
    centerDialogVisible.value = true
    id.value = row
}
//获取数据
const user = async () => {
    const res = await userData()
    data.value = res.data.data
}
//关闭
const Cancel = () => {
    centerDialogVisible.value = false
    num.value = 1
}
//添加按钮
const Confirm = async () => {
    const res = await UpUserData({ id: id.value, num: num.value })
    data.value = res.data.data
    centerDialogVisible.value = false
}
//封禁按钮
const open = (e: string) => {
    ElMessageBox.confirm(
        '确定封禁此账户吗？',
        '封禁账户',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            const res = await BanUserData({ id: e })
            data.value = res.data.data
            ElMessage({
                type: 'success',
                message: '封禁成功',
            })
        })
}
//解除封禁按钮
const open2 = (e: string) => {
    ElMessageBox.confirm(
        '确定解封此账户吗？',
        '解封账户',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            const res = await ReleaseUserData({ id: e })
            data.value = res.data.data
            ElMessage({
                type: 'success',
                message: '解封成功',
            })
        })
}
</script>

<template>
    <!-- 弹窗 -->
    <el-dialog v-model="centerDialogVisible" title="添加次数" :show-close="false" width="500" align-center>
        <el-input-number v-model="num" :min="1" :max="1000" />
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="Cancel">关闭</el-button>
                <el-button type="primary" @click="Confirm">
                    添加
                </el-button>
            </div>
        </template>
    </el-dialog>
    <!-- 表格 -->
    <div class="data">
        <el-table :data="data" border style="width: 100%">
            <el-table-column label="_id" prop="_id" />
            <el-table-column label="用户账号" prop="mail" />
            <el-table-column label="密码" prop="password" />
            <el-table-column label="状态" prop="state" width="100px" />
            <el-table-column label="积分" prop="frequency" width="100px" />
            <el-table-column align="left" label="操作">
                <template #default="scope">
                    <el-button type="danger" @click="open(scope.row._id)">
                        封禁
                    </el-button>
                    <el-button type="success" @click="open2(scope.row._id)">
                        解除
                    </el-button>
                    <el-button type="success" @click="handleDelete(scope.row._id)">
                        添加次数
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="page">
            <el-pagination class="pageTop" background layout="prev, pager, next" :total="10" />
        </div>
    </div>
</template>

<style scoped>
.data {
    width: 100%;
    height: 100%;
    position: relative;
    display: grid;
    grid-template-rows: 6% 90% 5%;
}

.page {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>